<template>
	<div class="roleWrap">
		<div class="flex_start mb-1">
			<el-button type="primary" :icon="'Plus'" @click="addRoleFunc">新增</el-button>
		</div>
		<el-table :data="tableData" stripe style="width: 100%">
			<el-table-column type="index" width="50" :index="indexMethod" />
			<el-table-column prop="name" align="center" label="角色名称" width="180" />
			<el-table-column prop="code" align="center" label="角色标识" width="180" />
			<el-table-column prop="comment" align="center" label="角色描述" />

			<el-table-column prop="action" label="操作" align="center">
				<template #default="scope">
					<!-- <el-button
            link
            type="primary"
            size="small"
            :icon="'SetUp'"
            @click="setPermission(1)"
            >菜单权限</el-button
          > -->
					<!-- <el-button
            link
            type="primary"
            size="small"
            :icon="'SetUp'"
            @click="setPermission(2)"
            >部门权限</el-button
          > -->
					<el-button link type="primary" size="small"
						@click="updateRoleFunc(scope.$index, scope.row)">编辑</el-button>

					<el-popconfirm title="确定删除吗?" @confirm="deleteRoleFunc(scope.row.id)">
						<template #reference>
							<el-button link type="danger" size="small">删除</el-button>
						</template>
					</el-popconfirm>
					<!-- <el-button link type="danger" size="small" @click="resetPwd">密码重置</el-button> -->
					<!-- <el-button link type="danger" size="small">删除</el-button> -->
				</template>
			</el-table-column>
		</el-table>

		<el-dialog v-model="treeDialog" :title="treeType == 1 ? '菜单权限设置' : '部门权限设置'" width="40%" align-center>
			<!-- <el-tree
        v-model="value"
        :data="orgList"
        show-checkbox
        @change="treeSlc"
        default-expand-all
        :render-after-expand="false"
        v-if="treeType == 2"
      /> -->
			<el-tree v-model="value" :data="menuList" show-checkbox @change="treeSlc" default-expand-all
				v-if="treeType == 1" :render-after-expand="false" />

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="treeDialog = false">取消</el-button>
					<el-button type="primary" @click="confirmSlc"> 确定 </el-button>
				</span>
			</template>
		</el-dialog>

		<el-dialog v-model="centerDialogVisible" :title="isUpdate ? '更新角色' : '新增角色'" width="40%" align-center>
			<p class="iptwrap flex_start">
				<span>角色名称：</span>
				<el-input v-model="sizeForm.name" placeholder="请输入角色名" clearable class="iptwidth" />
			</p>
			<p class="iptwrap flex_start">
				<span>角色标识：</span>
				<el-input v-model="sizeForm.code" placeholder="请输入角色标识" clearable class="iptwidth" />
			</p>
			<p class="iptwrap flex_start">
				<span>角色描述：</span>
				<el-input v-model="sizeForm.comment" placeholder="请输入角色描述" clearable class="iptwidth" />
			</p>
			<p class="iptwrap flex_start">
				<span>菜单权限1：</span>
				<el-tree :default-checked-keys="permissionList" :data="menuList" show-checkbox @check="treeSlc"
					@setCheckedKeys="setCheckedKeys" default-expand-all node-key="id" ref="treeWrap"
					v-if="treeType == 1" :render-after-expand="false" />
			</p>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="centerDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="confirmCreate" v-if="!isUpdate"> 确定 </el-button>
					<el-button type="primary" @click="confirmUpdate" v-if="isUpdate"> 更新 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		ref,
		onMounted,
		nextTick
	} from 'vue';
	import {
		findRoleList,
		createRole,
		updateRole,
		deleteRoleList,
		getRoleInfoById,
		getAllRole,
	} from '@/api/system/role/index.ts';
	import {
		queryTreeList,
		findMenuTree
	} from '@/api/system/menu/index.ts';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus';
	const indexMethod = (index) => {
		return index * 2;
	};
	export default defineComponent({
		setup() {
			const treeWrap = ref();
			const state = reactive({
				tableData: [],
				isUpdate: false,
				treeDialog: false,
				treeType: 1,
				centerDialogVisible: false,
				sizeForm: {
					name: '',
					code: '',
					comment: '',
					menuIds: '',
				},
				permissionList: [],
				menuList: [],
				orgList: [],
				treeWrap,
			});
			const queryRoleList = () => {
				findRoleList({
					pageSize: 20,
					pageNum: 1
				}).then((res) => {
					const {
						rows,
						total
					} = res;
					state.tableData = rows;
				});
			};
			//递归增加value属性 级联选择需要value字段
			const loopData = (data = []) => {
				data.map((item) => {
					if (item.children?.length) {
						loopData(item.children);
						item.value = item.label;
					} else {
						item.value = item.label;
						return item;
					}
				});
				return data;
			};

			const menuAndOrgList = () => {
				queryTreeList({}).then((res) => {
					// res.map(item=>{
					// 	item.value = item.id
					// 	return item
					// })
					// let ddd = loopData(res);
					// console.log('ddd', ddd);
					state.orgList = loopData(res);
				});
				findMenuTree({}).then((resR) => {
					state.menuList = resR;
				});
			};
			const treeSlc = (nodeObj, currentNode) => {
				const {
					checkedNodes,
					halfCheckedKeys
				} = currentNode;
				// console.log("nodeObj===>",nodeObj);
				// console.log("currentNode",currentNode);
				let ids = [];
				checkedNodes.map((item) => {
					ids.push(item.id);
					return ids;
				});
				if (halfCheckedKeys.length) {
					ids.unshift(...halfCheckedKeys);
				}
				state.sizeForm.menuIds = ids.join(',');
				// console.log("ids===>",ids);
			};
			const addRoleFunc = () => {
				state.isUpdate = false;
				state.centerDialogVisible = true;
				nextTick(() => {
					state.treeWrap.setCheckedKeys([]);
				});

				state.sizeForm = {
					name: '',
					code: '',
					comment: '',
					menuIds: '',
				};
			};

			const setCheckedKeys = () => {};
			const confirmCreate = () => {
				if (!state.sizeForm.name) {
					ElMessage({
						message: '请输入角色名称',
						type: 'warning',
					});
					return;
				}
				if (!state.sizeForm.code) {
					ElMessage({
						message: '请输入角色标识',
						type: 'warning',
					});
					return;
				}
				if (!state.sizeForm.comment) {
					ElMessage({
						message: '请输入角色描述',
						type: 'warning',
					});
					return;
				}
				if (!state.sizeForm.menuIds) {
					ElMessage({
						message: '请选择菜单权限',
						type: 'warning',
					});
					return;
				}

				createRole(state.sizeForm).then((res) => {
					queryRoleList();
					state.centerDialogVisible = false;
				});
			};
			const queryRoleInfo = (id) => {
				getRoleInfoById(id).then((data) => {
					// console.log("data",data);
					state.sizeForm = {
						name: data.name,
						code: data.code,
						comment: data.comment,
						menuIds: data.menuIds,
						id: data.id,
					};
					state.permissionList = data.menuIds.split(',');
				});
			};
			const updateRoleFunc = (index, data) => {
				nextTick(() => {
					state.treeWrap.setCheckedKeys([]);
				});
				state.isUpdate = true;
				state.centerDialogVisible = true;
				queryRoleInfo(data.id);
			};

			const confirmUpdate = () => {
				if (!state.sizeForm.name) {
					ElMessage({
						message: '请输入角色名称',
						type: 'warning',
					});
					return;
				}
				if (!state.sizeForm.code) {
					ElMessage({
						message: '请输入权限编码',
						type: 'warning',
					});
					return;
				}
				if (!state.sizeForm.comment) {
					ElMessage({
						message: '请输入角色描述',
						type: 'warning',
					});
					return;
				}
				if (!state.sizeForm.menuIds) {
					ElMessage({
						message: '请选择菜单权限',
						type: 'warning',
					});
					return;
				}
				updateRole({
					...state.sizeForm
				}).then((res) => {
					queryRoleList();
					state.centerDialogVisible = false;
					state.sizeForm = {
						name: '',
						code: '',
						comment: '',
						menuIds: '',
					};
				});
			};
			const deleteRoleFunc = (id) => {
				deleteRoleList(id).then((res) => {
					queryRoleList();
				});
			};

			const setPermission = (ty) => {
				state.treeDialog = true;
				state.treeType = ty;
			};

			const confirmSlc = () => {
				state.treeDialog = false;
			};
			onMounted(() => {
				queryRoleList();
				menuAndOrgList();
			});
			return {
				...toRefs(state),
				queryRoleList,
				addRoleFunc,
				confirmCreate,
				updateRoleFunc,
				confirmUpdate,
				deleteRoleFunc,
				treeSlc,
				confirmSlc,
				setPermission,
			};
		},
	});
</script>
<style lang="less" scoped>
	.roleWrap {
		:deep(.el-table) {
			background-color: transparent !important;
			font-size: 0.7vw;

			thead {
				color: #333 !important;
			}

			tr {
				background-color: transparent !important;
				color: #333;
			}

			tr:hover>td {
				background: rgba(255, 255, 255, 0.1) !important;
			}

			th {
				background-color: transparent !important;
				border-bottom: none !important;
				color: #333;
			}

			&::before {
				left: 0;
				bottom: 0;
				width: 100%;
				height: 0px;
			}
		}

		:deep(.el-table--enable-row-transition .el-popper .is-light) {
			background-color: rgba(255, 255, 255, 1) !important;
			border: 1px solid #fff !important;
		}

		:deep(.el-input__inner) {
			color: #333 !important;
		}

		.treeWrap {
			width: 40%;
		}

		.iptwrap {
			:deep(.el-input__inner) {
				color: #333 !important;
			}

			margin-bottom: 20px;
			width: 60%;

			.iptwidth {
				width: 80%;
			}

			.mb-2 {
				margin-bottom: 20px;
			}

			span {
				display: inline-block;
				width: 100px;
				text-align: right;

				&::before {
					content: '*';
					color: #f5222d;
				}
			}
		}

		.listItem {
			width: 80%;

			.itemRight {
				button {
					font-weight: 400;
				}
			}
		}
	}
</style>